<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    .div_head{
      padding: 0;
      position:fixed;
      width: 100%;
      height: 4rem;
      right: 0;
      top:0;
      background-color:white;
      z-index: 55;
    }
    #head_span{
      display: block;
      margin: 9px 70px 0 0 ;
    }
    #head_span>a{
      text-decoration: none;
      color: #909399;
      margin-left: 20px;
    }
    #head_span a:hover{
      color: rgb(145, 160, 208);
    }
    .el-col-10{
      width: 100%;
    }


    .shopping{
      width: 200px;
      height: 50px;
      background-color: #284558;
      display: inline-block;
      line-height: 48px;
      color: white;
      text-decoration: none;
      text-align: center;
      margin: 15px 12px 15px 0px;
    }
    .el-tabs__item{
      font-size: 20px;
      margin: 0 0px 0 205px;
      padding: 0 200px;
    }
    .el-tabs__active-bar{
      background-color: white;
    }
  </style>
</head>
<body>
<div id="app">
  <el-container>

    <el-header>
      <div class="div_head">
        <el-menu mode="horizontal" background-color="white"
                 text-color="color: rgb(29, 56, 136)" active-text-color="color: rgb(29, 56, 136)" style="width:1200px;margin: 0 auto">
          <el-menu-item><img  height="50px" src="imgs/logo.png" alt=""></el-menu-item>
          <el-menu-item index="1">首页</el-menu-item>
          <el-menu-item index="2">蛋糕</el-menu-item>
          <el-menu-item index="3">下午茶</el-menu-item>
          <el-menu-item index="4">精选食材</el-menu-item>
          <el-menu-item index="5">最新活动</el-menu-item>
          <el-menu-item index="6">企业专区</el-menu-item>
          <el-menu-item index="6">会员中心</el-menu-item>
          <div style="float: right;position: relative; top: 10px">
                <span id="head_span">
                <a href="">登录 </a> <a href=""> 注册</a>
                    <a href=""><i class="el-icon-s-goods" style="margin-left: 10px"></i></a>
                </span>
          </div>
        </el-menu>
      </div>
    </el-header>

      <el-main style="width: 1200px;margin: 0 auto">

        <el-row gutter="20">
          <el-col span="14">
            <!--轮播图-->
            <el-carousel trigger="click" height="450px">
              <el-carousel-item v-for="url in arr">
                <img :src="url" width="100%" alt="">
              </el-carousel-item>
            </el-carousel>
          </el-col>

          <el-card>
            <el-col span="10">
              <div>
                <p style="font-size: 25px;font-weight: bold">白色恋人|白巧树莓慕斯蛋糕</p>
                <el-divider></el-divider>
                <p style="font-size: 15px;color: #666">蛋糕坯绵软轻盈，加入树莓的淡奶油有着神秘清香，蛋糕与奶油之间，饱满新鲜的果肉铺满，这是一份温暖的甜蜜。</p>
                <div>
                  <img src="imgs/蛋糕尺寸.png" style="float: left;margin-bottom: 30px;">
                  <p style="float: right;margin-left: 20px;font-size: 14px">
                    <img src="imgs/重量logo.png" alt="">约1.7磅(≥800克)
                    <br>
                    <img src="imgs/餐具logo.png" alt="">+6套餐具
                    <br>
                    <img src="imgs/人数logo.png" alt="">适合3-6人食用
                    <br>
                    <img src="imgs/时间logo.png" alt="">最早3小时后配送
                    <br>
                    <br>
                  <a style="font-size: 24px;font-weight: bold;">￥265</a>/18cm
                  </p>
                </div>
                <template>
                  <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
                </template>
              <div>
                <a class="shopping">加入购物袋</a>
                <a class="shopping">立即购买</a>
              </div>
            </div>
            </el-col>
          </el-card>
          <el-divider></el-divider>

          <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="商品详情" name="first">
            <div  style="margin: 0 auto;">
              <img style="display: block" v-for="i in images" :src="i.url">
            </div>
          </el-tab-pane>
          <el-tab-pane label="累计评价" name="second">
            累计评价
          </el-tab-pane>
        </el-tabs>

        </el-row>
      </el-main>
    
    <el-footer>
      <div style="background-color: #282c30;color: #666666;text-align: center;padding: 50px 0">
        <p>有家蛋糕 提前3小时预订，北京市六环内免费配送 公司地址：北京市朝阳区798艺术区工美楼3层</p>
        <p>Copyright © 2009-2023 ebeecake有家蛋糕 有家（北京）食品有限公司 京ICP备09081733号-1 <img src="https://cdn.tmooc.cn/tmooc-web/css/img/beianh2019082901.png"> 京公网安备 11010802029572号</p>
        <p>公司电话：4006106798    食品经营许可证：JY11105110232865    食品生产许可证：SC12411051114584</p>
      </div>
    </el-footer>

  </el-container>
</div>
</body>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function () {
      return {
        arr:["imgs/商品详情1.png","imgs/商品详情2.png","imgs/商品详情3.png"],
        images:[{url:"imgs/商品详情1-1.jpg"},{url:"imgs/商品详情1-2.jpg"},
          {url:"imgs/商品详情1-3.jpg"},{url:"imgs/商品详情1-4.jpg"},
          {url:"imgs/商品详情1-5.jpg"},{url:"imgs/商品详情1-6.jpg"},
          {url:"imgs/商品详情1-7.jpg"},{url:"imgs/商品详情1-8.jpg"}],
        num: 1,
        activeName: 'first'

      }
    },
    methods:{
      handleChange(value) {
        console.log(value);
      },
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  })
</script>
</html>